<template>
  <div style="display: flex;">
    <select hidden id="print"></select>
    <div class="container">
      <div class="head-p">
        <div class="head-left">外卖小票打印机(已就绪)</div>
        <div>
          <Button v-if="wmxpData.status=='0'" type="success" @click="updateStatus('wmxp','1')">启用</Button>
          <Button v-else type="primary" @click="updateStatus('wmxp','0')">禁用</Button>
        </div>
      </div>
      <div style="padding: 16px;">
        <div class="div-item">
          <div class="div-item-left">型号：</div>
          <div class="div-item-right">
            <Select @on-change="receiptPrintChange" v-model="wmxpData.model" >
              <Option v-for="item in printerList" :key="item.model" :value="item.model" >{{ item.model }}
              </Option>
            </Select>
          </div>
        </div>
        <!-- <div class="div-item">
          <div class="div-item-left">打印纸：</div>
          <div class="div-item-right">
            <select class="printer-mode" id="printPaper"></select>
          </div>
        </div> -->
        <div class="div-item">
          <div class="div-item-left">自动打印：</div>
          <div class="div-item-right">
            <i-switch v-model="auto" @on-change="autoFun"></i-switch>
          </div>
        </div>
      </div>
    </div>

    <div class="container" style="margin-left: 10px;">
      <div class="head-p">
        <div class="head-left">电子面单打印机(已就绪)</div>
        <div>
          <Button v-if="dzmdData.status=='0'" type="success" @click="updateStatus('dzmd','1')">启用</Button>
          <Button v-else type="primary" @click="updateStatus('dzmd','0')">禁用</Button>
        </div>
      </div>
      <div style="padding: 16px;">
        <div class="div-item">
          <div class="div-item-left">型号：</div>
          <div class="div-item-right">
            <Select @on-change="facePrintChange" v-model="dzmdData.model" >
              <Option v-for="item in printerList" :key="item.model" :value="item.model" >{{ item.model }}
              </Option>
            </Select>
          </div>
        </div>
        <!-- <div class="div-item">
          <div class="div-item-left">打印纸：</div>
          <div class="div-item-right">
             <Select @on-change="facePrintChange" v-model="wmxpData.model" >
               <Option v-for="item in printerList" :key="item.model" :value="item.model" >{{ item.model }}
               </Option>
             </Select>
          </div>
        </div> -->
        <div class="div-item">
          <div class="div-item-left">自动打印：</div>
          <div class="div-item-right">
            <i-switch v-model="auto" @on-change="autoFun('dzmd')"></i-switch>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import * as API_Shops from "@/api/shops";
  export default {
    data() {
      return {
        printerList:[],
        wmxpData:{},
        dzmdData:{},
        wmxpForm: {
          id: '',
          num: '0',
          model: '',
          paper: '',
          status: '0',
          type: 'wmxp',
          auto: '1',
          storeId: '',
        },
        dzmdForm: {
          id: '',
          num: '0',
          model: '',
          paper: '',
          status: '0',
          type: 'dzmd',
          auto: '1',
          storeId: '',
        },

        auto: true,
        printerModel: ''
      }

    },
    methods: {
      printPaperChange(paper){

      },
      //更新小票打印机信息
      receiptUpdatePrinter(){
        API_Shops.saveOrUpdatePrinter(this.wmxpForm).then((res) => {
          if (res.success) {
            console.log(res);
            this.wmxpData  = res.result;

          }
        });
      },
      //更新面单打印机信息
      faceUpdatePrinter(){
        API_Shops.saveOrUpdatePrinter(this.dzmdForm).then((res) => {
          if (res.success) {
            console.log(res);
            this.dzmdData  = res.result;
          }
        });
      },

      //启用和禁用
      updateStatus(type, status) {
        if (type === 'wmxp') {
          this.wmxpForm.status=status;
          this.receiptUpdatePrinter();
        } else {
          //电子面单启用或者禁用
          this.dzmdForm.status=status;
          this.faceUpdatePrinter();

        }
      },
      //外卖更换打印机
      receiptPrintChange(value){
        console.log(value)
        this.wmxpForm.model=value;
        this.receiptUpdatePrinter();
      },
      //面单更换打印机
      facePrintChange(value){
        console.log(value)
        this.dzmdForm.model=value;
        this.faceUpdatePrinter();
      },
      printChange2(num) {
        // 1:拿到select对象： var myselect=document.getElementById("test");
        // 2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
        // 3:拿到选中项options的value： myselect.options[index].value;
        // 4:拿到选中项options的text： myselect.options[index].text;
        var myselect = document.getElementById('print');
        // for (var i = 0; i < myselect.children.length; i++) {
        //   var child =myselect.children.item(i);
        //   console.log(child.value);
        //   console.log(child.text);
        // }

        var index = myselect.selectedIndex;
        let LODOP = getCLodop();
        LODOP.Create_PageSize_List(document.getElementById('printPaper'), index);
      },

      autoFun(auto) {
        console.log(auto);
      },
      init() {
        API_Shops.getPrinter().then((res) => {
          if (res.success) {
            this.wmxpForm = res.result.wmxp;
            this.wmxpData=res.result.wmxp;
            this.dzmdForm=res.result.dzmd;
            this.dzmdData=res.result.dzmd;
          }
        });




        //var printNum = document.getElementById('print').value;
        //LODOP.Create_PageSize_List(document.getElementById('printPaper'), printNum);
      },
      initPrinter(){
        let LODOP = getCLodop();
        //初始化
        //LODOP.PRINT_INITA(0, 0, '100%', '100%', '打印任务');
        LODOP.Create_Printer_List(document.getElementById('print'));
        var myselect = document.getElementById('print');
        //组装数据给Select使用
        for (var i = 0; i < myselect.children.length; i++) {
          var child =myselect.children.item(i);
          var obj ={
            num:child.value,
            model:child.text
          }
          this.printerList.push(obj)
        }
        console.log(this.printerList)
      }
    },
    mounted() {
      this.initPrinter();
      this.init();
    }

  };
</script>

<style lang="scss" scoped>
  .head-left {
    color: orangered;
    font-size: 20px;
    font-weight: 500;
  }

  .container {
    width: 30%;
    background-color: white;
    border-radius: 5px;
  }

  .printer-mode {
    height: 35px;
    width: 100%;
    font-size: 14px;
  }

  .head-p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: white;
    border-bottom: solid lightgray 1px;
  }

  .div-item {
    line-height: 45px;
    display: flex;

    >.div-item-left {
      width: 80px;
    }

    >.div-item-right {
      flex: 1;
      word-break: break-all;
    }
  }
</style>
